<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2020/1/25
  Time: 14:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>部门员工弹出层</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../layui/css/layui.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<script src="../../layui/layui.js" charset="utf-8"></script>
<script src="/js/jquery-3.4.1.js" charset="utf-8"></script>
<body style="padding: 10px;background-color: rgb(236,240,245);">
    <input id="selectedUserId" value="" style="display: none">
    <input id="selectedUserName" value="" style="display: none">
    <input id="dept_id" value="${param.dept_id}" style="display: none">
    <!-- 功能区+表格 -->
    <div style="background-color: white;">
        <div class="layui-row">
            <h2 class="layui-col-xs9" style="padding-top: 10px;padding-left: 10px">${param.dept_name}</h2>
            <!-- 搜索框 -->
            <div class="layui-col-xs3" style="padding-top: 10px;padding-left: 10px;">
                <div style="width: 208px;height: 30px;border: 1px solid black;">
                    <input id="queryCondition" placeholder="查找..." style="height: inherit;border: 0;"/>
                    <button type="button" class="layui-btn layui-btn-sm layui-bg-cyan" style="position: absolute;" onclick="queryDeptStaff()">
                        <i class="layui-icon layui-icon-search"></i>
                    </button>
                </div>
            </div>
        </div>

        <table class="layui-hide" id="tb_deptStaff" lay-filter="filter_user"></table>
    </div>
</body>
<script>
    // 表格模块
    layui.use('table', function(){
        var table = layui.table;

        table.render({
            elem:'#tb_deptStaff',
            url:'/deptManage/getDeptStaffList.do',
            where: {
                queryCondition:$("#queryCondition").val(),
                dept_id:$("#dept_id").val()
            },
            title: '用户数据表',
            cols: [[
                {field:'user_id', title:'ID', hide: true},
                {type:'radio'},
                {field:'real_name', title:'真实姓名'},
                {field:'user_name', title:'用户名'},
                {field:'position_name', title:'职位'},
                {field:'telephone', title:'电话'}
            ]],
            page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'], //自定义分页布局
                groups: 5, //只显示 1 个连续页码
                first: false, //不显示首页
                last: false //不显示尾页
            }
        });
        table.on('radio(filter_user)', function(obj){
            var data = obj.data; //选中行的相关数据
            //将员工id、name保存
            $("#selectedUserId").val(data.user_id);
            $("#selectedUserName").val(data.real_name);
        });
    });

    /**
     * 条件查询部门员工信息，重载数据表格
     */
    function queryDeptStaff() {
        //重载表格
        layui.table.reload('tb_deptStaff', {
            url: '/deptManage/getDeptStaffList.do'
            ,where: {
                queryCondition:$("#queryCondition").val(),
                dept_id:$("#dept_id").val()
            }
        });
    }
</script>
</html>
